<template>
  <div>
    <!-- 音乐分享 -->
    <div v-if="editorStore.currentExtensionType === ExtensionType.MUSIC">
      <h2 class="text-gray-500 font-bold mb-1">音乐分享</h2>
      <p class="text-gray-400 text-sm">支持网易云/QQ音乐/Apple Music</p>
      <p class="text-gray-400 text-sm mb-1">注意：不支持VIP歌曲，建议使用自建API</p>
      <BaseInput
        v-model="editorStore.extensionToAdd.extension"
        class="rounded-lg h-auto w-full"
        placeholder="音乐链接..."
      />
      <div
        v-if="
          editorStore.extensionToAdd.extension.length > 0 &&
          editorStore.extensionToAdd.extension_type === ExtensionType.MUSIC
        "
        class="mt-1 text-gray-400 text-md"
      >
        解析结果：
        <span v-if="parseMusicURL(editorStore.extensionToAdd.extension)" class="text-green-400"
          >成功</span
        >
        <span v-else class="text-red-300">失败</span>
      </div>
    </div>
    <!-- Bilibili/YouTube视频分享 -->
    <div v-if="editorStore.currentExtensionType === ExtensionType.VIDEO">
      <div class="text-gray-500 font-bold mb-1">视频分享（支持Bilibili、YouTube）</div>
      <div class="text-gray-400 mb-1">粘贴自动提取ID</div>
      <BaseInput
        v-model="editorStore.videoURL"
        class="rounded-lg h-auto w-full my-2"
        placeholder="B站/YouTube链接..."
      />
      <div class="text-gray-500 my-1">Video ID：{{ editorStore.extensionToAdd.extension }}</div>
    </div>
    <!-- Github项目分享 -->
    <div v-if="editorStore.currentExtensionType === ExtensionType.GITHUBPROJ">
      <div class="text-gray-500 font-bold mb-1">Github项目分享</div>
      <BaseInput
        v-model="editorStore.extensionToAdd.extension"
        class="rounded-lg h-auto w-full"
        placeholder="https://github.com/username/repo"
      />
    </div>
    <!-- 网站链接分享 -->
    <div v-if="editorStore.currentExtensionType === ExtensionType.WEBSITE">
      <div class="text-gray-500 font-bold mb-1">网站链接分享</div>
      <!-- 网站标题 -->
      <BaseInput
        v-model="editorStore.websiteToAdd.title"
        class="rounded-lg h-auto w-full mb-2"
        placeholder="网站标题..."
      />
      <BaseInput
        v-model="editorStore.websiteToAdd.site"
        class="rounded-lg h-auto w-full"
        placeholder="https://example.com"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import BaseInput from '@/components/common/BaseInput.vue'
import { ExtensionType } from '@/enums/enums'
import { parseMusicURL } from '@/utils/other'
import { useEditorStore } from '@/stores/editor'

const editorStore = useEditorStore()
</script>

<style scoped></style>
